import React from 'react';
import { Space, Table, Tag, Button, Pagination } from 'antd';
import type{PaginationProps}from'antd';
import type { ColumnsType } from 'antd/es/table';
import { Navigate, useNavigate } from 'react-router';
import { useEffect, useState } from 'react';
import './excelList.css'
import {excelList} from '../../api/excel'
interface DataType {
  page: number;
  pageSize: number;
  key?: React.Key;
  username?: string;
  visitor?: string;
  mobile?: string;
  carnumber?: string;
  status?: string;
  v_id?: number;


}
var total=0
const showTotal: PaginationProps['showTotal'] = total => `共有 ${total} 条数据`;
const ExcelList: React.FC = () => {
  const columns: ColumnsType<DataType> = [
    {
      title: '审核人',
      dataIndex: 'username',

    },
    {
      title: '来访人',
      dataIndex: 'visitor',

    },
    {
      title: '来访人电话',
      dataIndex: 'mobile',

    },
    {
      title: '来访人车牌号',
      dataIndex: 'carnumber',

    },
    {
      title: '审核时间',
      dataIndex: 'addtime',

    },
    {
      title: '审核状态',
      dataIndex: 'status',
      width: 200,
      render: (text) =>
        (text === 3 ? <Tag color="green">终审通过</Tag> : text === 2 ? <Tag color="gold">待终审</Tag> : <Tag color="error">error</Tag>)
    },
    {
      title: '操作',
      dataIndex: 'logid',
      width: 10,
      render: (text:any, record:any) => (
        <Space size="middle">
          <Button type="primary" style={{ width: '96px', background: '#909399' }} onClick={getDetail(text)}> 详情</Button>
        </Space>
      ),
    },
  ];
  const navigate = useNavigate()
  // 跳转详情
  const getDetail=(id:any)=>{
    return()=>{
      navigate('/index/ExcelDeail?id='+id)
    }
  }
  const [params, setParams]: any = useState<DataType>({ page: 1, pageSize: 10 })
  // 分页
  const changePage=(page:any,pageSize:any)=>{
    setParams({...params,page,pageSize})
  }
  const[curpage,setCurpage]:any=useState()
  const [excelinfo, setexcelinfo]: any = useState([])
  const getexcelList = async () => {
    let res: any = await excelList(params)
    // console.log(res)
    if (res.code == "00000") {
      setexcelinfo(res.data)
      total=res.total
      setCurpage(res.current_page)
    }
  }

  useEffect(() => {
    getexcelList()
  }, [params])
  return (<div >
        <Table rowKey='logid' columns={columns} dataSource={excelinfo} bordered pagination={false} />
    <div className='page'>
        <Pagination current={curpage} total={total} showTotal={showTotal} showQuickJumper defaultPageSize={5} pageSizeOptions={['5', '10', '15', '20']} defaultCurrent={1} onChange={changePage} />
    </div>
  </div>)
}

export default ExcelList